<template>
  <div>
    <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="isReplyShow = true"
        >写评论</van-button
      >
      <van-icon name="comment-o" :badge="article.comm_count" color="#777" />
      <!-- 收藏组件 -->
      <Collect
        v-model="article.is_collected"
        :aut_id="article.art_id"
      ></Collect>
      <GoodJob v-model="article.attitude" :aut_id="article.art_id"></GoodJob>
      <van-icon name="share" color="#777777"></van-icon>
    </div>
    <van-popup v-model="isReplyShow" position="bottom" style="height: 30%">
      <!--
        v-if 条件渲染
          true：渲染元素节点
          false：不渲染
       -->
      <AddComment
        @post-success="onpostSuccess"
        :target="article.art_id"
      ></AddComment>
    </van-popup>
    <!-- /底部区域 -->
  </div>
</template>

<script>
import Collect from '@/components/Collect'
import GoodJob from '@/components/GoodJob'
import AddComment from './AddComment'
export default {
  name: 'BottomArea',
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isReplyShow: false
    }
  },
  components: {
    Collect,
    GoodJob,
    AddComment
  },
  methods: {
    onpostSuccess(data) {
      this.isReplyShow = false
      this.$emit('onpostSuccess', data)
    }
  }
}
</script>

<style lang="less" scoped>
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 88px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 282px;
    height: 46px;
    border: 2px solid #eeeeee;
    font-size: 30px;
    line-height: 46px;
    color: #a7a7a7;
  }
  /deep/.van-icon {
    font-size: 40px;
    .van-info {
      font-size: 16px;
      background-color: #e22829;
    }
  }
}
</style>
